<template>
  <div class="learn-container">
    <canvas id="core-01" class="learn-core" width="300" height="300"></canvas>
    <canvas id="core-02" class="learn-core" width="300" height="300"></canvas>
  </div>
</template>

<script>
export default {
  data () {
    return {

    }
  },
  mounted () {
    this.initCore01()
    this.initCore02()
  },
  methods: {
    initCore01 () {
      let canvas = document.getElementById("core-01")
      let ctx = canvas.getContext("2d")
      ctx.setLineDash([15, 10])
      ctx.lineDashOffset = 0;
      ctx.strokeStyle = 'gold'
      ctx.strokeRect(50, 50, 200, 200)
    },
    /* 
    * 绘制一个时钟
    */
    initCore02 () {
      let canvas = document.getElementById("core-02")
      let ctx = canvas.getContext('2d')
      draw(ctx);

      function draw (ctx) {
        requestAnimationFrame(function step() {
          drawDial(ctx); // 绘制表盘
          drawAllHands(ctx); // 绘制时分秒指针
          requestAnimationFrame(step);
        })
      }

      function drawAllHands (ctx) {
        let time = new Date()
        let s = time.getSeconds()
        let m = time.getMinutes()
        let h = time.getHours()

        let pi = Math.PI
        let secondAngle = pi / 180 * 6 * s;
        let minuteAngle = pi / 180 * 6 * m + secondAngle / 60; 
        let hourAngle = pi / 180 * 30 * h + minuteAngle / 12;

        drawHand(hourAngle, 60, 8, "#333", ctx);
        drawHand(minuteAngle, 102, 4, "#333", ctx);
        drawHand(secondAngle, 120, 1.5, "#333", ctx);
      }

      function drawHand(angle, len, width, color, ctx) {
        ctx.save();
        ctx.translate(150, 150); //把坐标轴的远点平移到原来的中心
        ctx.rotate(-Math.PI / 2 + angle);  //旋转坐标轴。 x轴就是针的角度
        ctx.beginPath();
        ctx.moveTo(-4, 0);
        ctx.lineTo(len, 0);  // 沿着x轴绘制针
        ctx.lineWidth = width;
        ctx.strokeStyle = color;
        ctx.lineCap = "round";
        ctx.stroke();
        ctx.closePath();
        ctx.restore();
      }

      function drawDial(ctx){
        let pi = Math.PI;
    
        ctx.clearRect(0, 0, 300, 300); //清除所有内容
        ctx.save();
    
        ctx.translate(150, 150); //一定坐标原点到原来的中心
        ctx.beginPath();
        ctx.arc(0, 0, 148, 0, 2 * pi); //绘制圆周
        ctx.fillStyle = 'rgba(255, 255, 255, 0.85)';
        ctx.fill();
        ctx.stroke();
        ctx.closePath();

        for (let i = 0; i < 60; i++){//绘制刻度。
            ctx.save();
            ctx.rotate(-pi / 2 + i * pi / 30);  //旋转坐标轴。坐标轴x的正方形从 向上开始算起
            ctx.beginPath();
            ctx.moveTo(125, 0);
            ctx.lineTo(140, 0);
            ctx.lineWidth = i % 5 ? 1.5 : 5;
            // ctx.strokeStyle = i % 5 ? "blue" : "red";
            ctx.strokeStyle = "#000";
            ctx.stroke();
            ctx.closePath();
            ctx.restore();
        }
        ctx.restore();
      }
    }
  }
}
</script>

<style lang="less" scoped>
  .learn-container {
    width: 100%;
    height: 100vh;
    background: url('~@/assets/img/imgBg3.jpg') center center/20% repeat;
    padding: 20px;

    .learn-core {
      border: 2px dashed #aaa;
      border-radius: 3px;
      margin: 50px;
    }
  }
</style>